<style lang="stylus">
html, body {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#app {
  position: relative;
  height: 100%;
}

input, textarea {
  font-family: inherit;
}
</style>
<style lang="stylus" scoped>
@import './assets/stylus/functions/scrollbar.styl';

.gallery {
  position: absolute;
  width: 100%;
  height: 100%;
}

.pager {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pager-header {
  height: 60px;
  flex-shrink: 0;
}

.pager-body {
  height: 100px;
  flex-grow: 1;
  overflow: auto;
  scrollbar();
}

.pager-footer {
  height: 40px;
  flex-shrink: 0;
}

.pager-header-inner {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px 0 10px;

  .side-toolset {
    display: flex;
    background: #333b4d;
    border-radius: 4px;
    overflow: hidden;
  }

  .chat {
    height: 400px;
  }
}

.scroll-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100%;
}

.fixed-height-pager {
  width: 90%;
  max-width: var(--max-container-width);
  height: 400px;
}

.footer-copyright {
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;

  a {
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.screen-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: backdrop-filter 0.4s ease-out, -webkit-backdrop-filter 0.4s ease-out, background 0.6s ease;

  &.defocus {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: all;
    transition: backdrop-filter 0.1s ease-out, -webkit-backdrop-filter 0.1s ease-out, background 0.15s ease;
  }
}
</style>

<template>
  <gallery :src="activeWallpaper" />
  <div class="pager" @contextmenu.prevent>
    <div class="pager-header">
      <div class="pager-header-inner">
        <div class="side-toolset">
          <app-settings :active-wallpaper="activeWallpaper" />
          <desktop-selector v-model="activeDesktopId" />
        </div>

        <logo-about @open-login="openLogin" @open-chat="openChat" @open-spark="openSpark" />
        <v-modal v-model="loginVisible" :width="450" :height="300">
          <div style="padding: 20px,">
            <login @confirm="loginFun" />
          </div>
        </v-modal>

        <v-modal v-model="chatVisible" :width="1000" :height="500">
          <div style="padding: 20px,">
            <chat @send="sendMsg" />
          </div>
        </v-modal>

        <v-modal v-model="sparkVisible" :width="1000" :height="500">
          <div style="padding: 20px,">
            <spark @send="sendSpark" />
          </div>
        </v-modal>

      </div>
    </div>
    <div class="pager-body">
      <div class="scroll-body">
        <div :class="['screen-mask', focused ? 'defocus' : '']" />
        <search-entrance @focus="focused = true" @blur="focused = false" />
        <div class="fixed-height-pager">
          <bookmark-desktop />
        </div>
      </div>
    </div>
    <div class="pager-footer">
      <div class="footer-copyright">
        <a href="http://beian.miit.gov.cn/" target="_blank">皖ICP备17026235号-1</a>
      </div>
    </div>
  </div>
  <easy-router />
</template>

<script setup lang="ts">
import { Ref, onUnmounted, provide, ref, watch } from 'vue';
import {
  getAppConfig,
  setAppConfigItem,
  getAppConfigItem,
} from '@/assets/ts/app-config';
import { bookmarkGetService } from '@/database/services/bookmark-service';
import Gallery from '@/components/gallery.vue';
import SearchEntrance from '@/components/search-entrance/index.vue';
import BookmarkDesktop from '@/components/bookmark-desktop.vue';
import AppSettings from '@/components/app-settings/index.vue';
import LogoAbout from '@/components/logo-about/index.vue';
import Login from '@/components/logo-about/login.vue';
import Chat from '@/components/logo-about/chat.vue';
import Spark from '@/components/logo-about/spark.vue';
import DesktopSelector from '@/components/desktop-selector/index.vue';
import EasyRouter from '@/components/easy-router.vue';
import { Message } from '@/ui-lib/message/index';
import { userApi } from '@/core/api/userApi';
import { ServiceConfig } from '@/core/servicePath';

import { Bookmark } from './database/entity/bookmark';
import { User } from './database/entity/user';
import { Connect, Send } from '@/core/webSocket';
import { messageApi } from '@/core/api/messageApi';

const loginVisible = ref(false);
const chatVisible = ref(false);
const sparkVisible = ref(false);

const appConfig = getAppConfig();
const focused = ref(false);

const activeDesktopId: Ref<string> = ref(appConfig.activeDesktopId);
// 阻止双指放大
function preventPageZoom(event: Event) {
  event.preventDefault();
}

function sendMsg(message: string) {
  Send(message);
}

function sendSpark(message: string) {

  messageApi().sendSpark(message).then((res) => {
          if (res.code == 200) {
            
          } else {
            new Message({ message: res.message });
          }
        });
}

function openLogin() {
  loginVisible.value = true;
}

function openChat() {
  const token = getAppConfigItem('token');
  if (token !== 'default') {
    chatVisible.value = true;
  } else {
    loginVisible.value = true;
  }
}

function openSpark() {
  const token = getAppConfigItem('token');
  if (token !== 'default') {
    sparkVisible.value = true;
  } else {
    loginVisible.value = true;
  }
}



function loginFun(user: User) {
  userApi().login(user).then((res) => {
    if (res.code == 200) {
      setAppConfigItem('token', res.data.token);
      setAppConfigItem('loginName', user.username);
      loginVisible.value = false;
      Connect(ServiceConfig.wsUrl + user.username);
      new Message({ message: '登陆成功' });
    } else {
      new Message({ message: res.message });
    }
  }).catch((e) => {
    new Message({ message: e.message || '请求失败，请重试' });
  });
}

document.addEventListener('gesturestart', preventPageZoom);
onUnmounted(() => {
  document.removeEventListener('gesturestart', preventPageZoom);
});

provide('activeDesktopId', activeDesktopId);
provide('changeWallpaper', (src: string) => {
  activeWallpaper.value = src;
});

const activeWallpaper: Ref<string> = ref('');


watch(
  activeDesktopId,
  (value) => {
    setAppConfigItem('activeDesktopId', value);
    bookmarkGetService(value).then((currentDesktop: Bookmark) => {
      const desktopValue = JSON.parse((currentDesktop.value as string) || '') || {};
      activeWallpaper.value = (desktopValue.wallpaper as string) || '';
    });
  },
  {
    immediate: true,
  }
);
</script>